<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>    
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 	request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE HTML>
<html>
<head>

<base href="<%=basePath%>">

<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<style type="text/css">
	.order_detail{
		background-color: durkgray;
		border: 1px solid black;
		border-right: 0; 
		height: 40px;
		line-height: 40px;
	}
	.order_detail input{
		height: 30px;
		text-align: center;
	}
	.order_add{
		border: 1px solid black;
	}
	#order_detail{
		text-align: center;
	}

</style>
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script> 
</head>
<body>
<article class="page-container">
	<form class="form form-horizontal" method="post" action="${empty customer ? 'customer/insert.do' : 'customer/update.do'}" id="orderForm">
	<!-- 隐藏域 ，订单状态-->
	<input type="hidden" name="orderStatus" value="1">
	
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">业务员：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<select name="userId">
					<option value="0">请选择</option>
					<c:forEach items="${users}" var="obj">
						
						<option value="${obj.userId}">${obj.realname}</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">客户：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<select name="customerId" id="customer" required="required">
					<option value="undefined">请选择</option>
					
					<!-- 
						html5开始支持html标签自定义属性（用于存储相关数据到标签上面）
						语法
							data-xxx
							data- : 固定前缀
							xxx ：根据当前场景建明之意
							如 ：
							data-base_id
							data-username
							data-user_id
							
							注意：html属性不支持驼峰命名，不支持大写，全部小写
							
						如何使用jquery对象获取自定义属性的值
						
						var value = $.data("xxx");
						如：
						var baseId = $.data("base_id");
						var username = $.data("username");
						var userId = $.data("user_id");
					 -->
					
					<c:forEach items="${customers}" var="obj">
						<option  data-base_id="${obj.baseId}"  value="${obj.customerId}">${obj.customerName}--${obj.baseId}</option>
					</c:forEach>
				</select>
			</div>
		</div>

		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">到达区域：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<select id="interval" name="intervalId">
					<option value="undefined">请选择</option>
					<c:forEach items="${intervals}" var="obj">
						<option  value="${obj.baseId}">${obj.baseName}--${obj.baseId}</option>
					</c:forEach>
				</select>
			</div>
		</div>
	</div>

	
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">收货地址：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value=""  placeholder="" id="shippingAddress" name="shippingAddress">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">收货人：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value=""   placeholder="" id="shippingName" name="shippingName">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">收货联系电话：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value=""   placeholder="" id="shippingPhone" name="shippingPhone">
			</div>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">付款方式：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<select name="paymentMethodId">
					<c:forEach items="${payments}" var="obj">
						<option value="${obj.baseId}">${obj.baseName}</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">货运方式：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<select name="freightMethodId">
					<c:forEach items="${freights}" var="obj">
						<option value="${obj.baseId}">${obj.baseName}</option>
					</c:forEach>
				</select>
			</div>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">取件方式：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<select name="takeMethodId">
					<c:forEach items="${fetchTypes}" var="obj">
						<option value="${obj.baseId}">${obj.baseName}</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">物流公司：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="xx物流公司"  disabled="disabled"  placeholder="" id="customerName" name="customerName">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">物流单号：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="243242343" disabled="disabled"   placeholder="" id="customerName" name="customerName">
			</div>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">收件人：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="仓管员A(隔壁老王)" disabled="disabled"   placeholder="" id="customerName" name="customerName">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">收货地址：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="广州市天河区xxx" disabled="disabled"   placeholder="" id="customerName" name="customerName">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">联系电话：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value="135xxxxx"  disabled="disabled"  placeholder="" id="customerName" name="customerName">
			</div>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">取件地址：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value=""   placeholder="" id="customerName" name="takeAddress">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">联系电话：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value=""   placeholder="" id="takePhone" name="takePhone">
			</div>
		</div>
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">取件联系人：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<input type="text" class="input-text" value=""   placeholder="" id="takeName" name="takeName">
			</div>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-4 col-sm-4">
			<label class="form-label col-xs-4 col-sm-4">订单备注：</label>
			<div class="formControls col-xs-8 col-sm-8">
				<textarea name="orderRemark" cols="" rows="" class="textarea"  placeholder="" ></textarea>
			</div>
		</div>
	</div>
	
	
	
	<div  id="order_detail" class="row cl">
		<div>
			<div  class="col-xs-2 col-sm-2 order_detail">货物名称</div>
			<div  class="col-xs-2 col-sm-1 order_detail">数量</div>
			<div  class="col-xs-2 col-sm-1 order_detail">单位</div>
			<div  class="col-xs-2 col-sm-2 order_detail">单价</div>
			<div  class="col-xs-2 col-sm-2 order_detail">总价值</div>
			<div  class="col-xs-2 col-sm-3 order_detail">备注</div>
			<div  class="col-xs-2 col-sm-1 order_detail order_add">
				<span style="font: 30px;cursor: pointer;color: green" 
					class="glyphicon glyphicon-plus"
					onclick="add_goods_detail();"
					></span>
				</div>
		</div>
		
		<div class="goods_detail" id="goods_detail">
			<div  class="col-xs-2 col-sm-2 order_detail">
				<input type="text" name="orderDetails[][goodsName]">
			</div>
			<div  class="col-xs-2 col-sm-1 order_detail">
				<input type="text" size="3" onkeyup="operationTotalPrice(this);"  name="orderDetails[][goodsNumber]">
			</div>
			<div  class="col-xs-2 col-sm-1 order_detail">
				<select name="orderDetails[][goodsUnit]">
					<c:forEach items="${units}" var="obj">
						<option value="${obj.baseId}">${obj.baseName}</option>
					</c:forEach>
				</select>
			</div>
			<div  class="col-xs-2 col-sm-2 order_detail">
				<input type="text"  onkeyup="operationTotalPrice(this);" name="orderDetails[][goodsUnitPrice]">
			
			</div>
			<div  class="col-xs-2 col-sm-2 order_detail">
				<input type="text" readonly="readonly" name="orderDetails[][goodsTotal]">
			</div>
			<div  class="col-xs-2 col-sm-3 order_detail">
				<input type="text" name="orderDetails[][goodsRemark]">
			</div>
			<div  class="col-xs-2 col-sm-1 order_detail order_add">
				<span id="removeSpan" style="font: 30px;cursor: pointer;color: red" 
				class="glyphicon glyphicon-remove"
				onclick="remove_goods_detail(this);"
				></span>
			</div>
		</div>
		
		
		
	</div>
	
	
	<div class="row cl">
		<div class="col-xs-12 col-sm-12 col-xs-offset-4 col-sm-offset-3">
			<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
		</div>
	</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script> 
<script type="text/javascript" src="lib/jquery/jquery.serializejson.min.js"></script>  
<script type="text/javascript">
	
	/* 文档加载完毕以后执行
		马上执行的代码放入里面，函数不能放入里面
	*/
$(function(){
	
	//为客户下拉框绑定 onchange事件
	$("#customer").change(function(){
		//1.获取[选中]客户的（区间id）基础数据id : baseId
		var baseId = $("#customer option:selected").data("base_id");
		//console.log(baseId);
		//console.log($("#interval option[value="+baseId+"]"));
		//2.获取所有的到区域的 option，并从option找到 value=baseId的属性让其选中
		$("#interval option[value="+baseId+"]").prop("selected",true);
	});
	
})

/**
 * 点击添加按钮新增 货品详情操作
 */
function add_goods_detail(){
	
	//克隆 id=goods_detail 商品明细div
	var goods_detail = $("#goods_detail").clone();
	//清除所有文本框的内容
	goods_detail.find("input").val("");
	
	//将克隆的div追加到外层div
	$("#order_detail").append(goods_detail);
		
}
/**
 * 删除货品明细
   思路：获取删除按钮的父标签的父标签删除
 */
function remove_goods_detail(obj){
	
	//获取所有的货品详情 使用 类选择器
	var goods_detail = $(".goods_detail");
	console.log(goods_detail)
	if(goods_detail.length == 1){
		//layer.msg("亲，最少有一个货品明细");
		layer.tips('亲，最少有一个货品明细', '#removeSpan');
		return false;
	}
	
	$(obj).parent().parent().remove();
}

/**
 * 计算每一个货品明细的 单价X数量=总价
 */
function operationTotalPrice(obj){
	//获取最外层的div
	var boxDiv = $(obj).parent().parent();
	//获取boxDiv的所有 input标签
	var inputs = boxDiv.find("input");
	//debugger;
	/* 
		jquery对象和原生对象的转换
		原生DOM对象转 jq对象  ： $(原生dom对象)
		jq对象转原生对象  jq对象[索引]
	*/
	//分别获取数量（第二个input）和单价（第三个input）的值
	var number = inputs[1].value;
	var unitPrice = inputs[2].value;
	if(number !="" && unitPrice !=""){
	//将值相乘赋值的总价（第四个inout）
		inputs[3].value = number * unitPrice;
	}
	
}


$(function(){
	
	$("#orderForm").validate({
		
		rules:{
			userId:{
				min:1
			},
			shippingName:"required",
			shippingAddress:"required",
			shippingPhone:"required",
			customerId:{
				digits:true
			}
		},
		messages:{
			userId:{
				min:"请选择业务员",
			},
			shippingName:"收货人不能为空",
			customerId:{
				digits:"必须选择客户"
			},
			shippingAddress:"收货地址不能为空",
			shippingPhone:"收货人电话不能为空",
		},
		submitHandler:function(form){
			
			//序列化表单: 序列化的是一个JSON对象
			var obj = $('#orderForm').serializeJSON();
			//将JSON对象转换成标准JSON格式的字符串，后台SpringMVC不能接受json对象，但是可以接受标准JSON格式字符串
			//然后转换成对象
			var jsonString = JSON.stringify(obj);
			console.log(typeof obj,obj);
			console.log(typeof jsonString,jsonString);
			//使用Ajax将json字符串提交给后台
			
			$.ajax({
				url:"order/insert.do",
				type:"post",
				contentType:"application/json;charset=utf-8",
				data:jsonString,
				success:function(data){
					layer.msg(data.message,{icon:data.code},function(){
						
						if(data.code == 1){
							//刷新父页面
							parent.refreshTable();
							
							//关闭父页面
							parent.layer.closeAll();
							
						}
					});
					
				}
			});
			
			
		}
		
		
	});
	
	
})
	

</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>